<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import rawData from './mixins/rawData'
console.log('rawData=============>', rawData)
const animationDuration = 6000

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart',
        },
        boxData: {
            type: Object,
            required: true,
            default: {},
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '500px',
        },
    },
    watch: {
        boxData: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            },
        },
    },
    data() {
        return {
            chart: null,
            average: [],
            rawDatas: [],
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, null, {
                renderer: 'canvas',
                useDirtyRect: false,
            })
        },
        setOptions(val) {
            console.log('echarts==============>', val.rawData)
            this.rawDatas = [...val.rawData]

            this.average = val.average
            let average2 = val.average2 || []
            console.log('maxValue==============>', val.maxValue)
            console.log('minValue==============>', val.minValue)
            console.log('target==============>', val.target)
            let upperLimit = val.maxValue || -1
            let lowerLimit = val.minValue || -1
            let targetValue = val.target || -1
            if (!this.rawDatas) {
                return
            }
            let rowData2 = val.rawData2 ? [...val.rawData2] : null
            let projectName1 =
                this.rawDatas.length > 1 ? this.rawDatas[1][5] : null
            let yAxis = [
                {
                    type: 'value',
                    axisTick: {
                        show: false, // 不显示坐标轴刻度线
                    },
                    name: projectName1,
                    axisLabel: {
                        formatter: '{value}',
                    },
                },
            ]
            let series = [
                {
                    name: projectName1,
                    type: 'boxplot',
                    datasetId: 'CheckoutResult_aggregate',
                    itemStyle: {
                        color: '#b8c5f2',
                    },
                    encode: {
                        y: ['最小', '四分之一', '中值', '四分之三', '最大'],
                        x: 'Country',
                        itemName: ['Country'],
                        tooltip: [
                            '最小',
                            '四分之一',
                            '中值',
                            '四分之三',
                            '最大',
                        ],
                    },
                    markLine: {
                        // symbol: ['none', 'none'],

                        label: {
                            // position:'start',
                            formatter: '{b}: {c}',
                            show: true,
                        },
                        lineStyle: {
                            color: '#D9001B',
                        },

                        data: [
                            {
                                name: '标准值',
                                // 支持 'average', 'min', 'max'
                                yAxis: targetValue,
                            },
                            {
                                name: '上限值',
                                yAxis: upperLimit,
                                // 支持 'average', 'min', 'max'
                                // type: 'max'
                            },
                            {
                                name: '下限值',
                                yAxis: lowerLimit,
                            },
                        ],
                    },
                },

                {
                    name: '均值(' + projectName1 + ')',
                    type: 'line',

                    symbolSize: 15,
                    data: this.average,

                    datasetIndex: 0,
                },
            ]
            let dataSet = [
                {
                    id: 'raw',
                    source: this.rawDatas,
                },
                {
                    id: 'since_year',
                    fromDatasetId: 'raw',
                    transform: [
                        {
                            type: 'filter',
                            config: {
                                dimension: 'CheckoutResult',
                                '>': 0,
                            },
                        },
                    ],
                },
                {
                    id: 'CheckoutResult_aggregate',
                    fromDatasetId: 'since_year',
                    transform: [
                        {
                            type: 'ecSimpleTransform:aggregate',
                            config: {
                                resultDimensions: [
                                    {
                                        name: '最小',
                                        from: 'CheckoutResult',
                                        method: 'min',
                                    },
                                    {
                                        name: '四分之一',
                                        from: 'CheckoutResult',
                                        method: 'Q1',
                                    },
                                    {
                                        name: '中值',
                                        from: 'CheckoutResult',
                                        method: 'median',
                                    },
                                    {
                                        name: '四分之三',
                                        from: 'CheckoutResult',
                                        method: 'Q3',
                                    },
                                    {
                                        name: '最大',
                                        from: 'CheckoutResult',
                                        method: 'max',
                                    },
                                    {
                                        name: 'SupplierBatchNo',
                                        from: 'SupplierBatchNo',
                                    },
                                ],
                                groupBy: 'SupplierBatchNo',
                            },
                        },
                        // {
                        //   type: 'sort',
                        //   config: {
                        //     dimension: 'Q3',
                        //     order: 'asc'
                        //   }
                        // }
                    ],
                },
            ]
            console.log('rawData2=====>', val.rawData2)
            if (val.rawData2) {
                let tempRow = [
                    {
                        id: 'raw2',
                        source: rowData2,
                    },
                    {
                        id: 'since_year2',
                        fromDatasetId: 'raw2',
                        transform: [
                            {
                                type: 'filter',
                                config: {
                                    dimension: 'CheckoutResult',
                                    '>': 0,
                                },
                            },
                        ],
                    },
                    {
                        id: 'CheckoutResult_aggregate2',
                        fromDatasetId: 'since_year2',
                        transform: [
                            {
                                type: 'ecSimpleTransform:aggregate',
                                config: {
                                    resultDimensions: [
                                        {
                                            name: '最小',
                                            from: 'CheckoutResult',
                                            method: 'min',
                                        },
                                        {
                                            name: '四分之一',
                                            from: 'CheckoutResult',
                                            method: 'Q1',
                                        },
                                        {
                                            name: '中值',
                                            from: 'CheckoutResult',
                                            method: 'median',
                                        },
                                        {
                                            name: '四分之三',
                                            from: 'CheckoutResult',
                                            method: 'Q3',
                                        },
                                        {
                                            name: '最大',
                                            from: 'CheckoutResult',
                                            method: 'max',
                                        },
                                        {
                                            name: 'SupplierBatchNo',
                                            from: 'SupplierBatchNo',
                                        },
                                    ],
                                    groupBy: 'SupplierBatchNo',
                                },
                            },
                            // {
                            //   type: 'sort',
                            //   config: {
                            //     dimension: 'Q3',
                            //     order: 'asc'
                            //   }
                            // }
                        ],
                    },
                ]
                dataSet = dataSet.concat(tempRow)
                let projectName2 = rowData2.length > 1 ? rowData2[1][5] : null
                yAxis.push({
                    type: 'value',
                    name: projectName2,
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value}',
                    },
                    splitLine: {
                        show: false, // 不显示网格线
                    },
                    axisTick: {
                        show: false, // 不显示坐标轴刻度线
                    },
                })
                series.push({
                    name: projectName2,
                    yAxisIndex: 1,
                    type: 'boxplot',
                    datasetId: 'CheckoutResult_aggregate2',
                    itemStyle: {
                        color: '#b8c5f2',
                    },
                    encode: {
                        y: ['最小', '四分之一', '中值', '四分之三', '最大'],
                        x: 'Country',
                        itemName: ['Country'],
                        tooltip: [
                            '最小',
                            '四分之一',
                            '中值',
                            '四分之三',
                            '最大',
                        ],
                    },
                    markLine: {
                        // symbol: ['none', 'none'],

                        label: {
                            // position:'start',
                            formatter: '{b}: {c}',
                            show: true,
                        },
                        lineStyle: {
                            color: '#D9001B',
                        },
                    },
                })
                series.push({
                    name: '均值(' + projectName2 + ')',
                    type: 'line',

                    symbolSize: 15,
                    data: average2,
                })
            }
            console.log('rowData2==============>', rowData2)

            echarts.registerTransform(ecSimpleTransform.aggregate)

            this.chart.clear()
            this.chart.setOption({
                dataset: dataSet,
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            backgroundColor: '#fff',
                        },
                    },
                    iconStyle: {
                        borderColor: '#c0c3cd',
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    color: '#fff',
                    textStyle: {
                        color: '#fff', //设置文字颜色
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        start: 0,
                        end: 20,
                    },
                    {
                        show: true,
                        type: 'slider',
                        top: '90%',
                        xAxisIndex: 0,
                        start: 0,
                        end: 20,
                    },
                    {
                        type: 'inside',
                        yAxisIndex: 0,
                    },
                    {
                        show: true,
                        type: 'slider',
                        yAxisIndex: 0,
                    },
                ],
                yAxis: yAxis,
                //  {
                //     name: '检验值',
                //     // nameLocation: 'middle',
                //     nameGap: 30,
                //     scale: true,
                // },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        // show: false
                    },
                },
                // dataZoom: [
                // 	{
                // 		type: 'inside'
                // 	},
                // 	{
                // 		type: 'slider',
                // 		height: 20
                // 	}
                // ],
                grid: {
                    top: 100,
                    bottom: 100,
                },
                legend: {
                    selected: {
                        detail: false,
                    },
                },

                series: series,
            })
        },
    },
}
</script>
